<template>
  <div>
    <!-- 游客 -->
    <a-carousel autoplay v-if="role == 1">
        <div class="swiper" v-for="item in imgList" v-bind:key="item">
          <img :src="item">
        </div>
    </a-carousel>
    <!-- 非游客 -->
    <div class="char" v-else>
      <div class="char-item" v-for="id in idList" v-bind:key="id" :id="id" />
    </div>
  </div>
</template>
 
<script>
import { defineComponent, onMounted, ref } from "vue";
import { getSwiperList } from '../../service/api/swiper';
import { setAllEcharts, EchartsConfigType } from './chartConfig';

export default defineComponent({
  setup() {
    const idList = Object.values(EchartsConfigType);
    const role = localStorage.getItem("role");
    const imgList = ref([]);

    const getSwiperDataRequest = async () => {
      const res = await getSwiperList();
      res?.data.forEach(item => {
        if (item.status === 1) {
          imgList.value.push(item.img);
        }
      })
    }

    onMounted(() => {
      if (role == 1) {
        getSwiperDataRequest();
      } else {
        setAllEcharts();
      }
    });
    return { idList, role, imgList }
  },
});
</script>
 
<style scoped>
.char {
  display: flex;
  flex-flow: wrap;
  height: 85vh;
  width: 1300px;
}

.char-item {
  margin: 0 20px;
  width: 500px;
  height: 50%;
  display: flex;
}

.swiper {
  height: 80vh;
  width: 1200px;
}

.swiper img {
  height: 100%;
  width: 100%;
}
</style>